<template>
  <div>
    <statistics :chooseTop="chooseTop" />
    <layout-main>
      <template #left>
        <echart-main class="echartMain">
          <template #title> 三务公开 </template>
          <template #echart>
            <swgk-item @infoClick="infoClick" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 人口信息 </template>
          <template #echart>
            <div class="rk_tops">
              <div class="rk_top">
                <echart :options="options1" />
              </div>
              <div class="rk_top">
                <echart :options="options2" />
              </div>
            </div>
            <div class="rk_tops">
              <echart :options="options3" />
            </div>
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 集体经济增长情况 </template>
          <template #echart>
            <echart :options="options4" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main class="echartMain">
          <template #title> 党政建设 </template>
          <template #echart>
            <party :dangjians="dangjians" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 土地概况 </template>
          <template #echart>
            <echart :options="options5" />
          </template>
        </echart-main>
        <echart-main class="echartMain">
          <template #title> 宅基地统计 </template>
          <template #echart>
            <echart :options="options6" />
          </template>
        </echart-main>
      </template>
      <template #bottom1>
        <echart-main class="bot">
          <template #title> 危房改造 </template>
          <template #echart>
            <echart :options="options7" />
          </template>
        </echart-main>
      </template>
      <template #bottom2>
        <echart-main class="bot">
          <template #title> 新能源设施 </template>
          <template #echart>
            <echart :options="options8" />
          </template>
        </echart-main>
      </template>
    </layout-main>
    <information v-if="infoShow" ref="infor" @closeInfo="closeInfo" />
  </div>
</template>

<script>
import EchartMain from "components/content/echartMain/EchartMain.vue";
import LayoutMain from "components/content/layoutMain/LayoutMain.vue";
import Echart from "components/common/echart/Echart.vue";
import SwgkItem from "./item/SwgkItem.vue";
import Information from "./item/Information.vue";
import Statistics from "components/content/item/Statistics.vue";
import Party from "components/content/item/Party.vue";

import {
  echarts1,
  echarts2,
  echarts3,
  echarts4,
  echarts5,
  echarts6,
  echarts8,
} from "./echartjs/echarts-nc";

import {
  getVillageTop,
  villageEconomic,
  riskCount,
  getLandGeneralSituation,
} from "network/sy";

export default {
  components: {
    LayoutMain,
    EchartMain,
    Echart,
    SwgkItem,
    Information,
    Party,
    Statistics,
  },
  data() {
    return {
      infoShow: false,
      options1: null,
      options2: null,
      options3: null,
      options4: null,
      options5: null,
      options6: null,
      options7: null,
      options8: null,
      swMain: null,
      dangjians: [],
      chooseTop: [],
    };
  },
  created() {
    this.getVillageTop();
    this.villageEconomic();
    this.riskCount();
    this.getLandGeneralSituation();
  },
  mounted() {
    this.echarts();
  },
  methods: {
    infoClick(id) {
      this.infoShow = true;
      this.$nextTick(function () {
        this.$refs.infor.showInfor(id);
      });
    },
    closeInfo() {
      this.infoShow = false;
    },
    perNum(num) {
      return (num * 100).toFixed(0);
    },
    async getVillageTop() {
      let result = await getVillageTop();
      this.dangjians = [
        {
          name: "党员数量",
          value: result.result.partyNum,
        },
        {
          name: "团员数量",
          value: result.result.rollNum,
        },
        {
          name: "预备党员",
          value: result.result.readyPartyNum,
        },
        {
          name: "入党申请人",
          value: result.result.activistPartyNum,
        },
      ];
      this.chooseTop = [
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco5.png"),
          name: "总人数",
          value: {
            val: result.result.peopleNum,
            unit: "人",
            color: "color1",
          },
        },
        {
          field: "zonghu",
          ico: require("assets/img/sy/gmIco6.png"),
          name: "总户数",
          value: {
            val: result.result.registerNum,
            unit: "户",
            color: "color2",
          },
        },
        {
          field: "cuenganbu",
          ico: require("assets/img/sy/gmIco7.png"),
          name: "村干部数量",
          value: {
            val: result.result.cadreNum,
            unit: "人",
            color: "color3",
          },
        },
      ];
      let zong = result.result.manNum + result.result.womanNum;
      let namNum = result.result.manNum;
      let womanNum = result.result.womanNum;
      let priorityNum = result.result.priorityNum;
      this.options1 = echarts1(this.perNum(namNum / zong));
      this.options2 = echarts2(this.perNum(womanNum / zong));
      this.options3 = echarts3(
        ["重点人员", "女性人数", "男性人数", "总人数"],
        [priorityNum, namNum, womanNum, zong]
      );
    },
    async villageEconomic() {
      let result = await villageEconomic();
      console.log(result);
      let dataX=[],dataY=[]
      result.result.forEach(val => {
        dataX.push(val.year)
        dataY.push(val.value)
      });
      this.options4 = echarts4(dataX,dataY);
    },
    async riskCount() {
      let result = await riskCount();
      this.options7 = echarts5(result.result,'');
    },
    async getLandGeneralSituation() {
      let result = await getLandGeneralSituation();
      let data = result.result.map(val => {
        return {
          name: val.x,
          value: val.y
        }
      })
      this.options5 = echarts5(data,'亩');
    },
    echarts() {
      this.options6 = echarts6([
        { name: "已建房", value: 834 },
        { name: "未建房", value: 1034 },
      ]);
      this.options8 = echarts8(
        ["1月", "2月", "3月", "4月", "5月"],
        [
          {
            name: "光伏",
            type: "bar",
            data: [100, 200, 300, 400, 500],
          },
          {
            name: "风力",
            type: "bar",
            data: [500, 400, 300, 200, 100],
          },
        ]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.echartMain {
  height: 33.3%;
}
.rk_tops {
  height: 50%;
  width: 100%;
  display: flex;

  .rk_top {
    width: 50%;
    height: 100%;
  }
}
.bot {
  height: 100%;
}
</style>